<template>
  <div class="hello">
    <!-- 父组件 -->
    <!-- 3. 当作标签使用 -->
    <!-- 父传子1：通过标签属性传值 -->
    <com-a
      :msg1="info"
      :msg2="list1"
      :msg3="person"
      :msg4="1"
      msg5="hi"
      :msg6="msg6"
    ></com-a>
    <button @click="list1=[66]">click-父组件</button>
  </div>
</template>

<script>
// 1.引入外部文件
import comA from './comA.vue'
export default {
  // name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      info: 'aepiutier',
      list1: [78],
      person: {
        name: 'Tom',
        age: 18
      },
      msg6: {
        name: 'Tony',
        age: 18
      }
    }
  },
  // 2.局部注册
  components: {
    comA: comA
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- 添加scoped这个属性，使得css仅作用于当前组件 -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
